<template>
  <div :class="'my-home-'+widthLevel" id="my-home">
    <v-row class="ma-3">
      <v-col :cols="widthLevel>2?8:12">
        <div style="display: flex; justify-content: space-between; align-content: space-between; flex-wrap: wrap">
          <v-card height="72" class="mb-3"  :width="widthLevel == 1?'48%':'38%'" >
            <div style="display: flex; justify-content: space-between">
              <div>
                <div class="text-center ma-1" style="font-size: 20px; font-weight: 400">浏览次数</div>
                <div class="text-center ma-1" style="font-size: 18px">{{application.pageView}}</div>
              </div>
              <div v-if="widthLevel > 1" class="blue lighten-4" style="margin: 4px; border-radius: 4px">
                <v-icon size="64" color="white">mdi-calendar-cursor</v-icon>
              </div>
            </div>
          </v-card>

          <v-card  height="72" class="mb-3" :width="widthLevel == 1?'48%':'38%'" >
            <div style="display: flex; justify-content: space-between">
              <div>
                <div class="text-center ma-1" style="font-size: 20px; font-weight: 400">点赞数量</div>
                <div class="text-center ma-1" style="font-size: 18px">{{application.thumbNumber}}</div>
              </div>
              <div v-if="widthLevel > 1" class="green lighten-4" style="margin: 4px; border-radius: 4px">
                <v-icon size="64" color="white">mdi-thumb-up-outline</v-icon>
              </div>
            </div>
          </v-card>

          <v-card color="mb" class="mb-3" height="72" v-if="widthLevel > 1" width="18%" style="font-weight: 500" :style="{'background-color':gcAverageTime.color}">
            <div style="font-size: 20px; font-weight: 400; text-align: center">回收时间</div>
            <div style="font-size: 18px; text-align: center">{{gcAverageTime.value}}ms</div>
          </v-card>

          <v-card  height="72" class="mb-3" :width="widthLevel == 1?'48%':'38%'" >
            <div style="display: flex; justify-content: space-between">
              <div>
                <div class="text-center ma-1" style="font-size: 20px; font-weight: 400">登录次数</div>
                <div class="text-center ma-1" style="font-size: 18px">{{application.managerLoginTimes}}</div>
              </div>
              <div v-if="widthLevel > 1" class="lime lighten-3" style="margin: 4px; border-radius: 4px">
                <v-icon size="64" color="white">mdi-login</v-icon>
              </div>
            </div>
          </v-card>

          <v-card height="72" class="mb-3" :width="widthLevel == 1?'48%':'38%'" >
            <div style="display: flex; justify-content: space-between">
              <div>
                <div class="text-center ma-1" style="font-size: 20px; font-weight: 400">错误数量</div>
                <div class="text-center ma-1" style="font-size: 18px">{{application.errorNumber}}</div>
              </div>
              <div v-if="widthLevel > 1" class="red" style="margin: 4px; border-radius: 4px">
                <v-icon size="64" color="white">mdi-alert-circle-outline</v-icon>
              </div>
            </div>
          </v-card>

          <v-card color="mb" class="mb-3" height="72" v-if="widthLevel > 1" width="18%" style="font-weight: 500" :style="{'background-color':systemCurrentLoad.color}">
            <div style="font-size: 20px; font-weight: 400; text-align: center">系统负载</div>
            <div style="font-size: 18px; text-align: center">{{systemCurrentLoad.value}}</div>
          </v-card>
        </div>
      </v-col>

      <v-col :cols="widthLevel>2?4:0" v-if="widthLevel > 2">
        <v-card class="pa-1">
          <div style="margin-bottom: 8px">
            <div>最近登录账户:<span :class="widthLevel<3?'d-block':''">{{application.managerAccount}}</span></div>
            <div>最近登录时间:<span :class="widthLevel<3?'d-block':''">{{new String(application.managerLastLoginTime).split(" ")[0]}}</span></div>
            <div>最近登录地址:<span :class="widthLevel<3?'d-block':''">{{application.managerLastLoginAddress}}</span></div>
          </div>
          <v-textarea label="通知" outlined no-resize rows="2" :loading="noticeLoading" color="blue" @click:append-outer="uploadNotice" append-outer-icon="mdi-upload" v-model="application.notice"></v-textarea>
        </v-card>
      </v-col>
    </v-row>


    <div style="display: flex; justify-content: space-between; flex-wrap: wrap; align-content: space-between">
      <div class="ma-3 pa-2" :class="'my-width-'+widthLevel">
        <h3 style="background-color: rgb(246, 246, 246)">线程信息</h3>
        <div style="background-color: white">
          <v-chart autoresize :options="threadOptions" style="width: 100%" theme="light"></v-chart>
        </div>
      </div>
      <div class="ma-3 pa-2" :class="'my-width-'+widthLevel">
        <h3 style="background-color: rgb(246, 246, 246)">内存信息</h3>
        <div style="background-color: white">
          <v-chart autoresize :options="memoryOptions" style="width: 100%" theme="light"></v-chart>
        </div>
      </div>
      <div class="ma-3 pa-2" :class="'my-width-'+widthLevel">
        <h3 style="background-color: rgb(246, 246, 246)">堆内存信息</h3>
        <div style="background-color: white">
          <v-chart autoresize :options="jvmOptions" style="width: 100%" theme="light"></v-chart>
        </div>
      </div>
      <div class="ma-3 pa-2" :class="'my-width-'+widthLevel">
        <h3 style="background-color: rgb(246, 246, 246)">非堆内存信息</h3>
        <div style="background-color: white">
          <v-chart autoresize :options="jvmNonOptions" style="width: 100%" theme="light"></v-chart>
        </div>
      </div>
      <div class="ma-3 pa-2" :class="'my-width-'+widthLevel">
        <h3 style="background-color: rgb(246, 246, 246)">数据库耗时信息</h3>
        <div style="background-color: white">
          <v-chart autoresize :options="databaseMethodOptions" style="width: 100%" theme="light"></v-chart>
        </div>
      </div>
      <div class="ma-3 pa-2" :class="'my-width-'+widthLevel">
        <h3 style="background-color: rgb(246, 246, 246)">缓存耗时信息</h3>
        <div style="background-color: white">
          <v-chart autoresize :options="redisMethodOptions" style="width: 100%" theme="light"></v-chart>
        </div>
      </div>
    </div>
    <div class="ma-3 pa-2">
      <h3 style="background-color: rgb(246, 246, 246)">基础方法耗时信息</h3>
      <div style="background-color: white">
        <v-chart autoresize :options="basicMethodOptions" style="width: 100%" theme="light"></v-chart>
      </div>
    </div>
  </div>
</template>

<script>
import Http from "../api/http";

export default {
  name: "home",


  data: ()=>{
    return {
      application: {
        gctimes: 0,
        gctime: 0
      },
      system: [],
      noticeLoading: false,
      basicMethodOptions: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['平均耗时','最大耗时', '最小耗时']
        },

        calculable: true,
        xAxis: [
          {
            name: '方法名',
            type: 'category',
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '耗时/ms'
          }
        ],
        series: [
          {
            name: '平均耗时',
            type: 'bar',
            data: [],
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          },
          {
            name: '最大耗时',
            type: 'bar',
            color: '#f10707',
            data: [],
          },
          {
            name: '最小耗时',
            type: 'bar',
            color: '#179e1a',
            data: [],
          }
        ]
      },
      databaseMethodOptions: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['平均耗时','最大耗时', '最小耗时']
        },
        calculable: true,
        xAxis: [
          {
            name: '方法名',
            type: 'category',
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '耗时/ms'
          }
        ],
        series: [
          {
            name: '平均耗时',
            type: 'bar',
            data: [],
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          },
          {
            name: '最大耗时',
            type: 'bar',
            color: '#f10707',
            data: [],
          },
          {
            name: '最小耗时',
            type: 'bar',
            color: '#179e1a',
            data: [],
          }
        ]
      },
      redisMethodOptions: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['平均耗时','最大耗时', '最小耗时']
        },
        calculable: true,
        xAxis: [
          {
            name: '方法名',
            type: 'category',
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '耗时/ms'
          }
        ],
        series: [
          {
            name: '平均耗时',
            type: 'bar',
            data: [],
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          },
          {
            name: '最大耗时',
            type: 'bar',
            color: '#f10707',
            data: [],
          },
          {
            name: '最小耗时',
            type: 'bar',
            color: '#179e1a',
            data: []
          }
        ]
      },
      jvmOptions: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['堆使用内存','堆申请内存', '堆可用最大内存']
        },
        xAxis: [
          {
            name: '时间/h',
            boundaryGap: false,
            type: 'category',
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '内存/M'
          }
        ],
        series: [
          {
            name: '堆使用内存',
            type: 'line',
            color: '#31b9bd',
            data: [],
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          },
          {
            name: '堆申请内存',
            type: 'line',
            color: '#2fb62a',
            data: [],
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          }
        ]
      },
      jvmNonOptions: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['非堆使用内存','非堆申请内存']
        },
        xAxis: [
          {
            name: '时间/h',
            boundaryGap: false,
            type: 'category',
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '内存/M'
          }
        ],
        series: [
          {
            name: '非堆使用内存',
            type: 'line',
            color: '#31b9bd',
            data: [],
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          },
          {
            name: '非堆申请内存',
            type: 'line',
            color: '#2fb62a',
            data: [],
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          }
        ]
      },
      memoryOptions: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['使用内存','申请内存','最大内存']
        },
        xAxis: [
          {
            name: '时间/h',
            boundaryGap: false,
            type: 'category',
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '内存/M'
          }
        ],
        series: [
          {
            name: '使用内存',
            type: 'line',
            color: '#31b9bd',
            data: [],
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          },
          {
            name: '申请内存',
            type: 'line',
            color: '#2fb62a',
            data: [],
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          },
          {
            name: '最大内存',
            type: 'line',
            color: '#f60505',
            data: [],
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          }
        ]
      },
      threadOptions: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['线程数','守护线程数']
        },
        xAxis: [
          {
            name: '时间/h',
            boundaryGap: false,
            type: 'category',
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '线程个数/个'
          }
        ],
        series: [
          {
            name: '线程数',
            type: 'line',
            color: '#31b9bd',
            data: [],
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          },
          {
            name: '守护线程数',
            type: 'line',
            color: '#2fb62a',
            data: [],
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          }
        ]
      }
    }
  },


  methods: {
    uploadNotice(){
      this.noticeLoading = true;
      Http.put("/management/notice", {}, {
        params: {
          "notice": this.application.notice
        }
      }).then(data=>{
        this.noticeLoading = false;
      }).catch(fail=>{
        this.noticeLoading = false;
        console.error(fail);
      })
    }
  },


  props: {
    widthLevel: Number
  },


  computed: {
    /* GC平均时间 */
    gcAverageTime(){
      if(this.application.gctimes == 0){
        return {
          color: '#a5a7a1',
          value: 0
        }
      }else {
        if(this.application.gctime/this.application.gctimes < 100){
          return {
            color: '#27b83e',
            value: (this.application.gctime/this.application.gctimes)>>0
          }
        }else if(this.application.gctime/this.application.gctimes < 200){
          return {
            color: '#477dd4',
            value: (this.application.gctime/this.application.gctimes)>>0
          }
        }else {
          return {
            color: '#fd0101',
            value: (this.application.gctime/this.application.gctimes)>>0
          }
        }
      }
    },

    /* 系统当前负载 */
    systemCurrentLoad(){
      let loadAverage = 0;
      if(this.system.length > 0){
        loadAverage = this.system[this.system.length - 1].loadAverage;
      }


      if(loadAverage < 0.1){
        return {
          color: '#2dd43f',
          value: loadAverage
        }
      }else if(loadAverage < 0.5){
        return {
          color: '#0941ea',
          value: loadAverage
        }
      }else {
        return {
          color: '#f50707',
          value: loadAverage
        }
      }
    }
  },


  activated() {
    // 1.初始化

    this.$emit("childloadingevent", true);

    Http.get("/management/information", ).then(data=>{
      if(data.code == 1){
        this.application = data.result.applicationInfo;
        this.system = data.result.systemInfo;
        let basicMethod = data.result.basicMethod;
        let databaseMethod = data.result.databaseMethod;
        let redisMethod = data.result.redisMethod;

        // 1.初始化接口方法的参数
        for(let i=0; i<basicMethod.length; i++){
          this.basicMethodOptions.xAxis[0].data.push(basicMethod[i].name);
          this.basicMethodOptions.series[0].data.push((basicMethod[i].totalTime/basicMethod[i].times).toFixed(1));
          this.basicMethodOptions.series[1].data.push(basicMethod[i].maxTime);
          this.basicMethodOptions.series[2].data.push(basicMethod[i].minTime);
        }

        // 2.初始化数据库方法的参数
        for(let i=0; i<databaseMethod.length; i++){
          this.databaseMethodOptions.xAxis[0].data.push(databaseMethod[i].name);
          this.databaseMethodOptions.series[0].data.push((databaseMethod[i].totalTime/databaseMethod[i].times).toFixed(1));
          this.databaseMethodOptions.series[1].data.push(databaseMethod[i].maxTime);
          this.databaseMethodOptions.series[2].data.push(databaseMethod[i].minTime);
        }

        // 3.初始化缓存方法的参数
        for(let i=0; i<redisMethod.length; i++){
          this.redisMethodOptions.xAxis[0].data.push(redisMethod[i].name);
          this.redisMethodOptions.series[0].data.push((redisMethod[i].totalTime/redisMethod[i].times).toFixed(1));
          this.redisMethodOptions.series[1].data.push(redisMethod[i].maxTime);
          this.redisMethodOptions.series[2].data.push(redisMethod[i].minTime);
        }

        // 4.初始化jvm参数
        for(let i=0; i<this.system.length; i++){
          this.jvmOptions.xAxis[0].data.push(this.system[i].time.split(" ")[1].split(":")[0]);
          this.jvmOptions.series[0].data.push((this.system[i].jvmUsedMemory/1028576)>>0);
          this.jvmOptions.series[1].data.push((this.system[i].jvmCommittedMemory/1028576)>>0);

          this.jvmNonOptions.xAxis[0].data.push(this.system[i].time.split(" ")[1].split(":")[0]);
          this.jvmNonOptions.series[0].data.push((this.system[i].jvmNonUsedMemory/1028576)>>0);
          this.jvmNonOptions.series[1].data.push((this.system[i].jvmNonCommittedMemory/1028576)>>0);

          this.memoryOptions.xAxis[0].data.push(this.system[i].time.split(" ")[1].split(":")[0]);
          this.memoryOptions.series[0].data.push((this.system[i].memoryUsed/1028576)>>0);
          this.memoryOptions.series[1].data.push((this.system[i].memoryCommitted/1028576)>>0);
          this.memoryOptions.series[2].data.push((this.system[i].memoryMax/1028576)>>0);

          this.threadOptions.xAxis[0].data.push(this.system[i].time.split(" ")[1].split(":")[0]);
          this.threadOptions.series[0].data.push(this.system[i].threadNumber);
          this.threadOptions.series[1].data.push(this.system[i].demonThreadNumber);
        }


        if(this.system.length != 0){
          this.application.gctime = this.system[this.system.length-1].gctime;
          this.application.gctimes = this.system[this.system.length-1].gctimes;
        }

      }else{
        this.$emit("childerror", data.message);
      }
      this.$emit("childloadingevent", false);
    }).catch(fail=>{
      console.error(fail);
      this.$emit("childerror", "服务端发生错误");
      this.$emit("childloadingevent", false);
    })
  }
}
</script>

<style scoped>
  .my-home-1 {
    margin: 10px 5px;
    padding: 0 5px;
  }

  .my-home-2 {
    margin: 15px 5px;
    padding: 0 5px;
  }

  .my-home-3 {
    margin: 15px 30px;
    padding: 0 5px;
  }

  .my-home-4 {
    margin: 15px 35px;
    padding: 0 5px;
  }

  .my-width-1 {
    width: 100%;
  }

  .my-width-2 {
    width: 100%;
  }

  .my-width-3 {
    width: 46%;
  }

  .my-width-4 {
    width: 46%;
  }
</style>

<style>
  #my-home .v-icon.v-icon.v-icon--link {
    color: #079c20;
  }

  #my-home .v-text-field.v-text-field--enclosed .v-text-field__details {
    display: none;
  }
</style>